<!--
 * new page
 * @author: sunYihui
 * @since: 2024-08-30
 * StaffsView.vue
-->
<template>
  <div class="body">
    <div class="title">投诉建议列表</div>
    <Table ref="userTable" v-bind="tableConfig">
      <template #search="{ searchSubmit, params }">
        <el-form :inline="true" class="demo-form-inline">

          <el-form-item label="关键字">
            <el-input style="width:150px" v-model="params.key" placeholder="搜索关键字" clearable />
          </el-form-item>
          <el-form-item label="地址">
            <el-input style="width:150px" v-model="params.address" placeholder="请输入地址" clearable />
          </el-form-item>
          <el-form-item label="电话">
            <el-input style="width:150px" v-model="params.tel" placeholder="请输入电话" clearable />
          </el-form-item>
          <el-form-item label="时间查询">
            <el-date-picker v-model="dateValue" @change="(e: any) => dateChange(e, params)" value-format="YYYY-MM-DD"
              type="daterange" range-separator="至" start-placeholder="起始日期" end-placeholder="截止日期" />
          </el-form-item>
          <el-form-item label="报修状态">
            <el-select clearable v-model="params.state" style="width:120px" placeholder="请选择状态">
              <el-option label="处理完成" value="3" />
              <el-option label="正在处理" value="2" />
              <el-option label="等待处理" value="1" />

            </el-select>
          </el-form-item>
          <el-form-item label="报修类型">
            <el-select clearable v-model="params.type" style="width:120px" placeholder="请选择类型">
              <el-option label="租户2" value="2" />
              <el-option label="业主1" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="居民">
            <el-input style="width:150px" v-model="params.userid" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item>
            <el-button class="search" type="primary" @click="searchSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </template>
      <!-- //性别处理 -->
      <template #sex="{ scope }">
        <div> {{ scope.row.sex == 1 ? '男' : '女' }}</div>
      </template>
      <!-- 管理楼栋 -->
      <template #building="{ scope }">
        <div v-for="item in scope.row.building" :key="item.id">{{ item.building }}</div>
      </template>

      <template #buttons="{ deleteAllHandle }">
        <el-button class="add" @click="add" type="primary">添加</el-button>
        <el-button class="del" @click="deleteAllHandle" type="danger">批量删除</el-button>
      </template>
      <template #operate="{ scope, deleteHandle }">
        <el-button @click="edit(scope.row)" type="primary">修改</el-button>
        <el-button class="delete" @click="deleteHandle(scope.row.id)" type="danger">删除</el-button>
      </template>
    </Table>

    <Add v-bind="updateData" @close="handleClose" v-if="isAdd"></Add>
  </div>
</template>
<script lang='ts' setup>
import Add from '../../components/staff/AddView.vue'
import Table from '../../components/table/TableView.vue'
import { tableConfig } from './Staffs'
import { ref, reactive } from 'vue'


type buildingids = {
  buildingid: number
}

export type updataType = {
  id: number
  name: string
  photo: null | string
  type: number | null
  sex: number
  mobile: string
  cardid: string
  pass: null | number
  state: number
  building: Array<buildingids>
}

 const updateData = reactive<updataType>({
  id: 0,
  name: "",
  photo: "",
  type: null,
  sex: 0,
  mobile: "",
  cardid: "",
  pass: null,
  state: 0,
  building: [
    {
      buildingid: 0
    }
  ]
})




const add = () => {
  Object.assign(updateData, {
    id: 0,
    name: "",
    photo: "",
    type: null,
    sex: 0,
    mobile: "",
    cardid: "",
    pass: null,
    state: 0,
    building: [
      {
        buildingid: 0
      }
    ]
  });
  isAdd.value = true;
}

const handleClose = (val: boolean | undefined) => {
  isAdd.value = false;
  if (val) {
    console.log("提交成功，刷新页面");
    userTable.value.getData();
  }
}

const isAdd = ref(false);



const edit = (item: updataType) => {
  console.log("职员参数", item);

  Object.assign(updateData, item);
  isAdd.value = true;
}


//通过ref获取表格实例来调用写在表格里面的方法
const userTable = ref<any>();
const dateValue = ref("");
const dateChange = (e: any, params: any) => {
  if (e == null) {
    params.begindate = null;
    params.enddate = null;
  }
  else {
    params.begindate = e[0];
    params.enddate = e[1];
  }

}

</script>
<style scoped lang="less">
@import url(../../assets/styles/baseCss/base.css);
</style>